// src/styles/mixins.scss

// ============ 响应式断点 Mixins ============

// 移动端媒体查询
@mixin mobile {
  @media (max-width: 750px) {
    @content;
  }
}

// PC端媒体查询
@mixin pc {
  @media (min-width: 751px) {
    @content;
  }
}

// 平板媒体查询
@mixin tablet {
  @media (min-width: 751px) and (max-width: 1024px) {
    @content;
  }
}

// 桌面媒体查询
@mixin desktop {
  @media (min-width: 1025px) {
    @content;
  }
}

// ============ Flex布局 Mixins ============

// Flex容器 - 水平垂直居中
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Flex容器 - 垂直居中
@mixin flex-vertical-center {
  display: flex;
  align-items: center;
}

// Flex容器 - 水平居中
@mixin flex-horizontal-center {
  display: flex;
  justify-content: center;
}

// Flex容器 - 两端对齐
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// Flex容器 - 两端分布
@mixin flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// Flex容器 - 垂直布局
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

// Flex容器 - 垂直居中对齐
@mixin flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// ============ 文本处理 Mixins ============

// 单行文本省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本省略
@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

// 文字描边
@mixin text-stroke($width: 1px, $color: #000) {
  -webkit-text-stroke: $width $color;
  text-stroke: $width $color;
}

// 文字渐变
@mixin text-gradient($gradient) {
  background: $gradient;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// ============ 边框 Mixins ============

// 1px 边框 (移动端高清屏适配)
@mixin hairline-border($position: all, $color: #e5e5e5, $radius: 0) {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    
    @if $position == all {
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      border: 1px solid $color;
      transform: scale(0.5);
      transform-origin: 0 0;
      
      @if $radius != 0 {
        border-radius: $radius * 2;
      }
    } @else if $position == top {
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: $color;
      transform: scaleY(0.5);
    } @else if $position == bottom {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: $color;
      transform: scaleY(0.5);
    } @else if $position == left {
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: $color;
      transform: scaleX(0.5);
    } @else if $position == right {
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: $color;
      transform: scaleX(0.5);
    }
  }
}

// ============ 滚动条 Mixins ============

// 隐藏滚动条
@mixin hide-scrollbar {
  -ms-overflow-style: none; // IE 和 Edge
  scrollbar-width: none; // Firefox
  
  &::-webkit-scrollbar {
    display: none; // Chrome, Safari, Opera
  }
}

// 自定义滚动条
@mixin custom-scrollbar($width: 6px, $thumb-color: #ccc, $track-color: transparent, $radius: 3px) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $radius;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $radius;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// ============ 动画过渡 Mixins ============

// 过渡动画
@mixin transition($properties: all, $duration: 0.3s, $timing: ease) {
  transition: $properties $duration $timing;
}

// 多属性过渡
@mixin transitions($transitions...) {
  transition: $transitions;
}

// 变换动画
@mixin transform($transforms) {
  transform: $transforms;
}

// ============ 定位 Mixins ============

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 绝对定位填充父元素
@mixin absolute-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// 固定定位居中
@mixin fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// ============ 背景 Mixins ============

// 背景图片居中
@mixin bg-cover($url: null) {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  @if $url {
    background-image: url($url);
  }
}

// 背景图片包含
@mixin bg-contain($url: null) {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
  @if $url {
    background-image: url($url);
  }
}

// ============ 形状 Mixins ============

// 圆形
@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

// 正方形
@mixin square($size) {
  width: $size;
  height: $size;
}

// 三角形
@mixin triangle($direction: top, $size: 10px, $color: #000) {
  width: 0;
  height: 0;
  border-style: solid;
  
  @if $direction == top {
    border-width: 0 $size $size $size;
    border-color: transparent transparent $color transparent;
  } @else if $direction == bottom {
    border-width: $size $size 0 $size;
    border-color: $color transparent transparent transparent;
  } @else if $direction == left {
    border-width: $size $size $size 0;
    border-color: transparent $color transparent transparent;
  } @else if $direction == right {
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent $color;
  }
}

// ============ 阴影 Mixins ============

// 盒阴影
@mixin box-shadow($shadow...) {
  box-shadow: $shadow;
}

// 文字阴影
@mixin text-shadow($shadow...) {
  text-shadow: $shadow;
}

// ============ 占位符 Mixins ============

// 输入框占位符样式
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

// ============ 清除浮动 Mixin ============

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// ============ 宽高比 Mixin ============

// 保持宽高比
@mixin aspect-ratio($width: 16, $height: 9) {
  position: relative;
  
  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
  }
  
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// ============ 多列布局 Mixin ============

// 多列布局
@mixin columns($count: 2, $gap: 20px) {
  column-count: $count;
  column-gap: $gap;
}

// ============ 选择器工具 Mixins ============

// 深度选择器 (Vue3)
@mixin deep($selector) {
  :deep(#{$selector}) {
    @content;
  }
}

// 全局选择器 (Vue3)
@mixin global($selector) {
  :global(#{$selector}) {
    @content;
  }
}

// ============ 响应式字体 Mixin ============

// 响应式字体大小
@mixin responsive-font($mobile-size, $pc-size) {
  @include mobile {
    font-size: $mobile-size;
  }
  
  @include pc {
    font-size: $pc-size;
  }
}

// ============ 点击态 Mixin ============

// 移动端点击态
@mixin tap-active($opacity: 0.7) {
  @include mobile {
    &:active {
      opacity: $opacity;
    }
  }
}

// PC端悬停态
@mixin hover-active($scale: 1.05) {
  @include pc {
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale($scale);
    }
  }
}

